<template>
    <div id="app">
        <keep-alive>
            <transition :name="viewTransition" :css="!!direction">
                <router-view v-if="isKeepAlive" :style="{width: client.width + 'px', height: client.height + 'px'}"></router-view>
            </transition>
        </keep-alive>
        <transition :name="viewTransition" :css="!!direction">
            <router-view v-if="!isKeepAlive" :style="{width: client.width + 'px', height: client.height + 'px'}"></router-view>
        </transition>
        <div class="back-home" v-if="showBackHome" @click="backHome">
            <span class="icon icon-home"></span>
            <span class="back-home-text home-slide-right">回到首页</span>
        </div>
        <div v-show="isShowRefresh" class="dev-refresh-btn" style="top:60px;" onclick="window.location.reload();">刷新</div>
        <tabbar v-show="isShowTabbar">
            <tabbar-item v-for="item in tabItems" :key="item.name" :selected="item.link == $route.path" :link="item.link">
                <i slot="icon" class="iconfont" :class="item.icon"></i>
                <span slot="label">{{item.name}}</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>

<script>
    import {
        Tabbar,
        TabbarItem,
        Group,
        Cell
    } from 'vux'
    import {
        TAB_ITEMS
    } from '@/conf/constant'
    import {
        mapGetters
    } from 'vuex'

    export default {
        name: 'App',
        components: {
            Tabbar,
            TabbarItem
        },
        data() {
            return {
                isKeepAlive: true,
                tabItems: TAB_ITEMS,
                isShowTabbar: false,
                showBackHome: false,
                isShowRefresh: false
            }
        },
        computed: {
            ...mapGetters({
                direction: 'getterDirection',
                client: 'getterClient'
            }),
            viewTransition () {
                if (!this.direction) return ''
                return 'vux-pop-' + (this.direction === 'forward' ? 'in' : 'out')
            }
        },
        watch: {
            '$route': 'routeChange'
        },
        methods: {
            routeChange() {
                this.isShowTabbar = false
                if (['首页', '发现', '消息', '我的'].indexOf(this.$route.meta.title) != -1) {
                    this.isShowTabbar = true
                }
                this.showBackHome = this.isShowTabbar ? false : true
                this.isKeepAlive = this.$route.meta.keepAlive
            },
            backHome() {
                this.$router.push('/home')
            }
        },
        mounted() {
            this.isShowRefresh = window.location.hostname == 'h5.zhaoonline.com' ? false : true
        }
    }
</script>
<style lang="less">
    @import '~vux/src/styles/reset.less';
</style>
<style lang="scss">
    @import './assets/styles/common.scss';
    #app {
        overflow: hidden;
        .weui-tabbar {
            position: fixed;
        }
    }
    .vux-pop-out-enter-active,
        .vux-pop-out-leave-active,
        .vux-pop-in-enter-active,
        .vux-pop-in-leave-active {
        will-change: transform;
        transition: all 500ms;
        height: 100%;
        backface-visibility: hidden;
        perspective: 1000;
    }
    .vux-pop-out-enter {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .vux-pop-out-leave-active {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .vux-pop-in-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .vux-pop-in-leave-active {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .back-home {
        vertical-align: middle;
        position: fixed;
        z-index: 999;
        right: 0;
        bottom: 70px;
        padding: 0 5px 0 10px;
        height: 28px;
        line-height: 28px;
        color: #fff;
        text-align: center;
        opacity: 0.8;
        background-color: #666;
        border-radius: 14px 0 0 14px;
        .articon{
            font-size: 16px;
            position: relative;
            top: -1px;
        }
        .back-home-text {
            position: relative;
            left: 0;
            @include display-inline-block;
            padding-right: 6px;
            white-space: nowrap;
            font-size: 12px;
        }
    }
    .dev-refresh-btn {
        position: fixed;
        top: 100px;
        right: 30px;
        width: 35px;
        height: 35px;
        background-color: #dd4444;
        color: #fff;
        border-radius: 50%;
        z-index: 999999999;
        font-size:12px;
        line-height:35px;
        text-align:center;
        opacity: 0.9;
    }
</style>
